<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-container>
        <el-header style=" background-color: #0095d7">
            <i class="el-icon-s-home" style="float: left;margin-top: 20px;" @click="back()"></i>
            <i class="el-icon-circle-plus-outline" style="float: right;margin-top: 20px;" @click="add()"></i>

            <h1 style="color: white;font-size: 22px">
                <center>收货地址</center>
            </h1>
        </el-header>
        <el-main>

            <el-table v-if="currentIndex=='1-1'"
                      :data="addressArr"
                      style="width: 100%">
                <!--type=index 设置这一列显示的内容为编号-->
                <el-table-column type="index" label="编号"></el-table-column>
                <el-table-column
                        prop="consignee"
                        label="收货人"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="电话号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="location"
                        label="地址"
                        width="180">
                </el-table-column>

                <el-table-column label="是否默认" width="80" align="center">
                    <template slot-scope="scope">
                        <el-switch
                                @change="changeIsDefault(scope.row)"
                                v-model="scope.row.isDefault"
                                :active-value="1"
                                :inactive-value="0"
                                active-color="#13ce66"
                                inactive-color="#AAAAAA">
                        </el-switch>
                    </template>
                </el-table-column>

                <el-table-column label="操作">
                    <!--scope里面装着当前行所对应的对象信息
                    scope.$index 得到当前行对应的对象在数组中的下标
                    scope.row 得到当前行对应的对象
                    -->
                    <template slot-scope="scope">
                        <el-button size="mini" @click="addressUpdate(scope.row)"
                                   type="success">修改
                        </el-button>
                        <el-popconfirm
                                title="您确定删除此地址吗?"
                                @confirm="addressDelete(scope.$index, scope.row)">
                            <el-button slot="reference" size="mini"
                                       type="danger">删除
                            </el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
    </el-container>
</div>
</body>


<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                currentIndex: "1-1",
                addressArr: [],
                enableText: ['非默认', '默认'],
            }
        },
        methods: {
            addressUpdate(product) {
                location.href = "/updateaddress.html?id=" + product.id;
            },
            addressDelete(index, product) {
                //发出删除商品请求
                axios
                    .create({'headers': {'Authorization': localStorage.getItem("jwt")}})
                    .get("/product/delete?id=" + product.id).then(function () {
                    v.productArr.splice(index, 1);
                })
            },

            back(){
                location.href="index.html";
            },

            add(){
                if (location.search.indexOf("id") != -1) {//包含wd代表显示搜索结果
                    //根据地址栏中的wd搜索内容发出请求获取所有相关地址
                    let id = location.search.split('=')[1];
                    location.href='addressadd.html?id='+id;
                }
            },

            addressDelete(index, address) {
                //发请求删除分类
                axios
                    .create({'headers': {'Authorization': localStorage.getItem("jwt")}})
                    .get("/address/"+address.id+"/deleteById").then(function () {
                    //删除数组中的元素  (删除位置,删除数量)
                    v.addressArr.splice(index, 1);
                })
            },

            changeIsDefault(address){
                console.log(address)
                let enableText=['非默认','默认'];
                let url='http://localhost:8080/address/'+address.id;
                if(address.isDefault == 1){
                    console.log('将改为默认');
                    url+='/enable';
                }else {
                    console.log('将改为非默认')
                    url+='/disable';
                }
                console.log('url = ' + url);
                axios
                    .create({'headers': {'Authorization': localStorage.getItem("jwt")}})
                    .post(url).then((response) => {
                    let responseBody = response.data;
                    if (responseBody.state == 20000) {
                        let message = '将地址的状态改为【' + enableText[address.isDefault] + '】成功！';
                        this.$message({
                            message: message,
                            type: 'success'
                        });
                    }else{
                        this.$message.error(responseBody.message);
                    }
                    if (responseBody.state == 40400) {
                        this.loadAddressList();
                    }
                });

            },

            loadAddressList(){
                //发请求获取所有地址数据
                console.log("..........................")
                if (location.search.indexOf("id") != -1) {//包含wd代表显示搜索结果
                    //根据地址栏中的wd搜索内容发出请求获取所有相关地址
                    let id = location.search.split('=')[1];
                    console.log("id=" + id);
                    let url = "/address/" + id;
                    console.log('url=' + url);
                    axios
                        .create({'headers': {'Authorization': localStorage.getItem("jwt")}})
                        .get(url).then(function (response) {
                        v.addressArr = response.data.data;
                        console.log(v.addressArr)

                    })
                }
            }



        },
        created: function () {
           this.loadAddressList();
        }
    })
</script>
</html>